import React from 'react'
import { Button, message, Modal} from 'antd'
import Table from '../../components/Table'
import { FormModal } from '../../components/ModalForm'
import 'whatwg-fetch'
import API from '../../axios/api'
import { PermissionStatus, DATATATUS } from '../../utils/system-data'
import { keyToValue } from '../../utils/utils'

require('es6-promise').polyfill();

const confirm = Modal.confirm

const columns = [
    { dataIndex: 'PermissionType', title: '类型', width: 100, render: (text) => keyToValue(PermissionStatus,text, 'mean')},
    { dataIndex: 'PermissionName', title: '菜单名称', width: 200,},
    { dataIndex: 'PageUrl', title: '菜单地址', width: 300,},
    { dataIndex: 'PermissionParentName', title: '上级菜单', width: 100,},
    { dataIndex: 'PermissionSort', title: '排序', width: 100,},
]

class Permission extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
            modalShowAddChild: false,
            PermissionParentId: ''
        }
    }
    fetchTableData =  async () => {
        await API.fetchPermissions({}).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentDidMount() {
        this.fetchTableData()
    }

    add = () =>{
        this.setState({
            modalShow: true
        })
    }

    onOk = (param) =>{
        param.PermissionParentId = this.state.PermissionParentId
        API.addPermission(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancel()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancel = () =>{
        this.setState({
            modalShow: false
        })
    }

    onOkAddChild = (param) =>{
        param.PermissionParentId = this.state.item.Id
        API.addPermission(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancelAddChild()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancelAddChild = () =>{
        this.setState({
            modalShowAddChild: false
        })
    }

    onOkEdit = (param) =>{
        param.Id = this.state.item.Id
        API.editPermission(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('保存成功')
                this.onCancelEdit()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancelEdit = () =>{
        this.setState({
            modalShowEdit: false
        })
    }

    tableAction = (actionKey, item) => {
        if (actionKey === 'addChild') {
            this.setState({
                item: item,
                modalShowAddChild: true
            })
        }else if (actionKey === 'edit') {
            this.setState({
                item: item,
                modalShowEdit: true
            })
        }else if (actionKey === 'delete') {
            confirm({
                title: '提示',
                content: '确定删除吗',
                onOk: () => {
                    this.handerDel(item, DATATATUS.DELETE).then(res => {
                        if(res.Code === 200){
                            this.fetchTableData()
                            message.success('删除成功')
                        }
                        else message.error(res.Message)
                    })
                },
                onCancel() {}
            })
        }
    }
     handerDel(item, status){
        return  API.delPermission({Id: item.Id, Status: status})
    }

    fields = () => {
        return [
            { label: '菜单名称', type: 'input', name: 'PermissionName',
                options: {
                    rules: [
                        { required: true, message: '菜单名称必填!',}
                    ]
                }
            },
            {
                label: '类型',
                type: 'select',
                name: 'PermissionType',
                defaultValue: '1',
                items: () => PermissionStatus,
                options: {
                    rules: [{
                        required: true,
                        message: '类型必选!',
                    }]
                }
            },
            { label: '菜单地址', type: 'input', name: 'PageUrl'},
            { label: '描述', type: 'textarea', name: 'PermissionDescribe', options:{row: 2}},
            { label: '排序', type: 'inputNumber', name: 'PermissionSort', options:{setp: 1}},
        ]
    }

    fieldsAddChild = () => {
        const item = this.state.item
        return [
            { label: '菜单名称', type: 'input', name: 'PermissionName', items: item.PermissionDescribe,
                options: {
                    rules: [
                        { required: true, message: '权限名称必填!',}
                    ]
                }
            },
            {
                label: '类型',
                type: 'select',
                name: 'PermissionType',
                items: () => PermissionStatus,
                options: {
                    disabled: false,
                    rules: [{
                        required: true,
                        message: '权限类型必输!',
                    }]
                }
            },
            { label: '菜单地址', type: 'input', name: 'PageUrl'},
            { label: '描述', type: 'textarea', name: 'PermissionDescribe', options:{row: 2}},
            { label: '排序', type: 'inputNumber', name: 'PermissionSort', options:{setp:1}}]
    }

    fieldsEdit = () => {
        const item = this.state.item
        return [
            { label: '菜单名称', type: 'input', name: 'PermissionName', items: item.PermissionDescribe,
                options: {
                    rules: [
                        { required: true, message: '权限名称必填!',}
                    ]
                }
            },
            {
                label: '类型',
                type: 'select',
                name: 'PermissionType',
                items: () => PermissionStatus,
                options: {
                    disabled: false,
                    rules: [{
                        required: true,
                        message: '权限类型必输!',
                    }]
                }
            },
            { label: '菜单地址', type: 'input', name: 'PageUrl'},
            { label: '描述', type: 'textarea', name: 'PermissionDescribe', options:{row: 2}},
            { label: '排序', type: 'inputNumber', name: 'PermissionSort', options:{setp:1}}]
    }

    render() {
        return (
            <div id="wrap">
                <div className="tableBox">
                    <Button  type="primary" onClick={this.add}>添加顶级菜单</Button>
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ false }
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            action={row => [
                                { key: 'addChild', name: '添加下级节点', color: 'blue', icon: 'plus'},
                                // { key: 'edit', name: '编辑', color: 'blue', icon: 'edit'},
                                { key: 'delete', name: '删除', color: 'red', icon: 'delete'},
                            ]}
                        />
                    </div>
                </div>
                <setPerm />
                <FormModal
                    modalKey="add"
                    visible={this.state.modalShow}
                    title="添加"
                    fields={this.fields()}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    okText="保存"
                />
                <FormModal
                    modalKey="addChild"
                    visible={this.state.modalShowAddChild}
                    title="添加"
                    fields={this.fieldsAddChild()}
                    onOk={this.onOkAddChild}
                    onCancel={this.onCancelAddChild}
                    okText="保存"
                />
                <FormModal
                    modalKey="edit"
                    visible={this.state.modalShowEdit}
                    title="编辑"
                    fields={this.fieldsEdit()}
                    onOk={this.onOkEdit}
                    onCancel={this.onCancelEdit}
                    okText="保存"
                />
            </div>
        )
    }
}
export default Permission
